// cover some element-ui styles

.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}

.el-upload {
  input[type="file"] {
    display: none !important;
  }
}

.el-upload__input {
  display: none;
}

.cell {
  .el-tag {
    margin-right: 0px;
  }
}

.small-padding {
  .cell {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.fixed-width {
  .el-button--mini {
    padding: 7px 10px;
    width: 60px;
  }
}

.status-col {
  .cell {
    padding: 0 10px;
    text-align: center;

    .el-tag {
      margin-right: 0px;
    }
  }
}

// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
  position: relative;
  left: 0;
  margin: 0 auto;
  transform: none;
  &__header {
    padding: 15px;
  }
  &__body {
    padding: 0 15px;
    max-height: 578px;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

// refine element ui upload
.upload-container {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// dropdown
.el-dropdown-menu {
  a {
    display: block
  }
  &__item {
    line-height: 30px !important;
  }
}

// fix date-picker ui bug in filter-item
.el-range-editor.el-input__inner {
  display: inline-flex !important;
}

// to fix el-date-picker css style
.el-range-separator {
  box-sizing: content-box;
}

.el-menu--collapse
  > div
  > .el-submenu
  > .el-submenu__title
  .el-submenu__icon-arrow {
  display: none;
}


.is-disabled {
  .el-input__inner,
  .el-textarea__inner,
  .el-checkbox__label,
  .el-radio__label {
    color: #606266 !important;
  }
  &.is-checked .el-radio__inner::after {
    background-color: #606266 !important;
  }
  &.is-checked .el-checkbox__inner::after {
    border-color: #606266 !important;
  }
}

.form-like-input {
  display: block;
  padding: 0 15px;
  // margin-bottom: 1px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: text;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: #fff;
  color: #606266;
  font-size: 14px;
  &:hover {
    border-color: #C0C4CC;
  }
  &.disabled {
    cursor: not-allowed;
    border-color: #dfe4ed;
    background-color: #f5f7fA;
    color: #606266 !important;
  }
  .empty-text {
    color: #c0c4cc;
    font-size: inherit;
  }
  &.like-select {
    height: unset !important;
    .form-like-select {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      z-index: 1;
      margin: 0 -15px;
      padding-top: 3px;
      padding-bottom: 3px;
      max-width: 100%;
      line-height: normal;
      white-space: normal;
    }
    .tags {
      display: contents;
      .select-tag {
        display: flex;
        align-items: center;
        margin: 2px 0 2px 6px;
        max-width: 100%;
        border: 1px solid #e9e9eb;
        border-radius: 4px;
        box-sizing: border-box;
        background-color: #f4f4f5;
        color: #909399;
      }
      .tag-text {
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .tag-close {
        position: relative;
        top: 0;
        right: -5px;
        height: 16px;
        width: 16px;
        line-height: 16px;
        border-radius: 50%;
        text-align: center;
        cursor: pointer;
        vertical-align: middle;
        flex-shrink: 0;
        transform: scale(.8);
        background-color: #c0c4cc;
        color: #909399;
        &::before {
          display: block;
          transform: translateY(.5px);
        }
        &:hover {
          background-color: #909399;
          color: #fff;
        }
      }
    }
  }
}

.is-error {
  .el-upload-dragger,
  .form-like-input,
  .el-input.is-disabled .el-input__inner {
    border-color: #ff4949;
  }
}

.el-form-item {
  &__label {
    font-weight: 400;
  }
  &--mini {
    .form-like-input {
      height: 28px;
      line-height: 28px;
      font-size: 12px;
      &.like-select {
        min-height: 28px;
        .form-like-select {
          padding-top: 1px;
          padding-bottom: 1px;
        }
        .select-tag {
          padding: 0 5px;
          height: 20px;
          line-height: 19px;
          font-size: 12px;
        }
        .tag-close {
          margin-left: -3px;
          transform: scale(.7);
        }
      }
    }
  }
  &--small {
    .form-like-input {
      height: 32px;
      line-height: 32px;
      font-size: 13px;
      &.like-select {
        min-height: 32px;
        .select-tag {
          padding: 0 5px;
          height: 20px;
          line-height: 19px;
          font-size: 12px;
        }
        .tag-close {
          margin-left: -3px;
          transform: scale(.7);
        }
      }
    }
  }
  &--medium {
    .form-like-input {
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      &.like-select {
        min-height: 36px;
        .select-tag {
          padding: 0 8px;
          height: 24px;
          line-height: 22px;
          font-size: 12px;
        }
        .tag-close {
          transform: scale(.8);
        }
      }
    }
  }
}

.el-table {
	.el-table__header-wrapper,
  .el-table__fixed-header-wrapper {
		th {
			height: 40px;
      line-height: 0;
			word-break: break-word;
			background-color: #eef1f9;
			color: #515a6e;
			font-size: 13px;
		}
    .caret-wrapper {
      width: 21px;
      height: 21px;
      .ascending {
        top: -2px;
      }
      .descending {
        bottom: 0;
      }
    }
	}
	.el-table__body-wrapper {
		.el-button [class*="el-icon-"] + span {
			margin-left: 1px;
		}
	}
  tr {
    &.error-row {
      background-color: #fef0f0;
      color: #f56c6c;
    }
    &.cancle-row {
      background-color: #f9f9f9;
      color: #999;
    }
  }
  .row-value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .table-link-btn {
    padding: 0;
    width: unset;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    &.color-table-text {
      cursor: text;
      color: #606266;
    }
  }
  .opera-row {
    display: flex;
    align-items: center;
    margin-left: -8px;
    overflow: hidden;
    .permi-btn {
      margin-left: 0;
      overflow: hidden;
    }
    .el-button {
      margin-left: 8px;
      &.icon-opera-item {
        font-size: 16px;
      }
    }
  }
}

.permi-btn,
.el-button {
  & + .permi-btn,
  & + .el-button {
    margin-left: 8px;
  }
}